<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin: 0; padding: 0;}
    /* 总结 rem*/
    /* rem 单位跟 html单位挂过，如果html单位是15px 1rem = 15px * 2 = 30px */
    html {font-size: 20px;}
    .rem > h1 {font-size: 1rem;}
    .rem > h2 {font-size: 3rem;}
    @media screen and (max-width: 900px){
        html {
            font-size: 10px;
        }
    }
    
    /* 总结 vw vh */
    /* vw vh 屏幕总宽高为100vw 和 100vh 假如屏幕是1280 10vw 就是 128px */
    .vwvh > h1 {font-size: 10vw;}
    .vwvh > h2 {font-size: 10vw;}
    .vwvh > p {font-size: 2.77777778vw;} 
    .vwvh > span {font-size: 30px;}
    
    /* 总结 em */
    /* em基于父元素 父元素font-szie: 10px 子元素2em 就是20px 若父元素没有单位会找到上级父元素的单位一直到html的单位*/
    /* 若都没设置则使用默认像素 */
    /* .em {font-size: 20px;} */
    /* body {font-size: 20px;} */
    .em > h1 {font-size: 1em;}
    .em > h2 {font-size: 2em;}
    .em > p {font-size: 3em;} 
    .em > span {font-size: 60px;}
   
</style>
<body>

    <div class="rem">
        <h1>Coding in html</h1>
        <h2>Codeing in html and css and js you can edit it by vue or react or jquery or js</h2>
    </div>
    
    <br>
    <br>
    <br>
    <br>
    <div class="vwvh">
        <h1>Coding in html</h1>
        <h2>Codeing in html and css and js you can edit it by vue or react or jquery or js</h2>
        <p>测试vw</p>
        <span>测试绝对px</span>
    </div>

    <br>
    <br>
    <br>
    <br>
    <div class="em">
        <h1>Coding in html</h1>
        <h2>Codeing in html and css and js you can edit it by vue or react or jquery or js</h2>
        <p>测试vw</p>
        <span>测试绝对px</span>
    </div>
</body>
</html>